<template>
<div>
  <van-image
  width="1.4rem"
  height="1.4rem"
  :src="userCtrl"
  @click="goPop"
/>
<van-popup
  v-model:show="isShow"
  round
  position="bottom"
  :style="{ height: '30%' }"
>
<div class="panpel">
<div class="report">
  <div @click="getReport">举报<van-icon name="arrow" /></div>
<div class="tips">辱骂攻击、广告、违法违规</div>
</div>
<van-button round  class="btn" @click="getCancel">取消</van-button>
</div>
</van-popup>
</div>
</template>

<script setup lang="ts">
// import {ref} from 'vue'
import userCtrl from '@/assets/img/user-ctrl.png'
import {ref} from 'vue'
// const props = defineProps(["show", 'id']);
const props = defineProps<{
  // show: boolean,
  id:(string|number),
  
}>();

const isShow = ref<boolean>(false);
// isShow.value = props.show;
// console.log("show=>", props.id);
// watch(isShow, (n,o) => {
//     console.log('新的',n);
    
// })
const goPop = () => {
  isShow.value = !isShow.value;
  // console.log('此时此刻的触发的id=>',props.id);
  
}
let curId = ref<number>();
curId.value =Number( props.id);
const getReport = () => {
  console.log("举报成功 !", curId.value);
  isShow.value = false;
  
}
const getCancel = () => {
  isShow.value = false;
}
</script>

<style lang="scss" scoped>

.panpel {
  padding: 1.2rem;
  text-align: center;
  font-size: 1.05rem;
  padding-bottom: .5rem;

.report {
  color:#333;
  font-size: 1.05rem;
  padding-bottom: 1.5rem;
  border-bottom: .05rem solid #f5f5f5;
}
.tips {
  margin-top: .5rem;
    font-size: .8rem ;
    column-rule: #ccc;
  }
}
.btn {
  margin-top: 1.8rem;
  width: 80vw;
}

</style>

